import React from 'react';
import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const ActivityTimeline = ({ hourlyPattern }) => {
  const labels = Array.from({ length: 24 }, (_, i) => {
    if (i === 0) return '12am';
    if (i < 12) return `${i}am`;
    if (i === 12) return '12pm';
    return `${i - 12}pm`;
  });

  const colors = hourlyPattern.map((_, hour) => {
    if (hour >= 22 || hour < 6) return 'rgba(245, 101, 101, 0.8)';
    if (hour >= 18 && hour < 22) return 'rgba(255, 193, 7, 0.8)';
    if (hour >= 6 && hour < 12) return 'rgba(72, 187, 120, 0.8)';
    return 'rgba(102, 126, 234, 0.8)';
  });

  const data = {
    labels,
    datasets: [
      {
        label: 'Visits',
        data: hourlyPattern,
        borderColor: 'rgba(102, 126, 234, 1)',
        backgroundColor: 'rgba(102, 126, 234, 0.1)',
        borderWidth: 2,
        fill: true,
        tension: 0.4,
        pointRadius: 3,
        pointHoverRadius: 5,
        pointBackgroundColor: colors,
        pointBorderColor: colors
      }
    ]
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.parsed.y} visits`;
          }
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          color: 'rgba(255, 255, 255, 0.7)',
          precision: 0
        },
        title: {
          display: true,
          text: 'Number of Visits',
          color: 'rgba(255, 255, 255, 0.7)'
        }
      },
      x: {
        ticks: {
          color: 'rgba(255, 255, 255, 0.7)'
        },
        title: {
          display: true,
          text: 'Hour of Day',
          color: 'rgba(255, 255, 255, 0.7)'
        }
      }
    }
  };

  return (
    <div style={{ height: '300px', width: '100%' }}>
      <Line data={data} options={options} />
    </div>
  );
};

